<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm nav-header">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-24">
          <div class="flex items-center space-x-4">
            <img src="@/assets/image/logo.png" alt="亿购网" class="h-32" />
            <div class="source">
              <p class="flex items-center space-x-1">
                <img src="@/assets/image/label/location-e4d293d08a.png" />
                <b class="text-orange-500">{{ source }}</b>
              </p>
              <div
                class="flex items-center text-amber-500 cursor-pointer text-sm relative"
                @mouseenter="showSource = true"
                @mouseleave="showSource = false"
              >
                <span> 切换货源地</span>
                <el-icon class="ml-1">
                  <ArrowDown />
                </el-icon>
                <div class="absolute z-10 left-0 top-4 py-1" v-if="showSource">
                  <a
                    href="#"
                    class="block text-sm hover:bg-orange-100 dark:hover:bg-orange-600 dark:text-orange-200 dark:hover:text-white"
                    v-for="(item, index) in otherSource"
                    >{{ item }}</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 max-w-2xl mx-8">
            <div class="relative">
              <input
                type="text"
                placeholder="请输入关键词搜索"
                v-model="searchKeyword"
                class="w-full h-10 pl-4 pr-10 text-sm border rounded-lg focus:outline-none focus:border-orange-500"
              />
              <button
                class="absolute right-1 top-1/2 -translate-y-1/2 px-3 py-1 bg-black text-white rounded-lg !rounded-button whitespace-nowrap"
                @click="handleSearch"
              >
                搜索
              </button>
            </div>
            <!-- 新增外层容器控制布局 -->
            <div class="relative h-6 overflow-visible">
              <!-- 内容容器 -->
              <div
                class="absolute top-0 left-0 flex items-center flex-wrap text-sm text-yellow-600 space-x-4 gap-1 overflow-hidden transition-all duration-200 max-h-6 hover:max-h-[500px] border border-transparent hover:border-yellow-500 rounded-lg hover:bg-white z-10"
                style="box-shadow: 0 0 0 1px transparent"
                @mouseover="handleMouseOver"
                @mouseout="handleMouseOut"
              >
                <img
                  src="@/assets/image/label/hotcats-8709473726.png"
                  class="h-4"
                />
                <template v-for="tag in tagGroups" :key="tag">
                  <button
                    @click="byTagSearch(tag)"
                    class="hover:text-orange-500 whitespace-nowrap"
                  >
                    {{ tag }}
                  </button>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主导航 -->
      <!-- <nav class="bg-white border-b"> -->
      <nav>
        <div class="container mx-auto px-4">
          <div class="flex items-center justify-between h-16">
            <!-- 导航栏 -->
            <ul class="flex items-center space-x-8 h-12">
              <li v-for="(item, index) in navItems" :key="index">
                <a
                  href="#"
                  class="text-gray-600 hover:text-orange-500"
                  :class="{ 'text-orange-500': item.active }"
                >
                  {{ item.name }}
                </a>
              </li>
            </ul>
            <!-- 用户登录  -->
            <div class="flex items-center space-x-4 mx-8">
              <template v-if="!userStore.isLogin">
                <button
                  class="text-gray-600 hover:text-orange-600 !rounded-button whitespace-nowrap text-orange-500"
                  @click="handleToLogin"
                >
                  登录
                </button>
                <button
                  class="text-gray-600 hover:text-orange-500 !rounded-button whitespace-nowrap"
                  @click="handleToRegister"
                >
                  注册
                </button>
              </template>
              <template v-if="userStore.isLogin">
                <button
                  class="bg-orange-600 hover:text-orange-200 rounded-lg whitespace-nowrap text-white px-2 relative"
                >
                  {{ userStore.account }}
                </button>
                <div class="relative">
                  <button
                    class="text-gray-600 hover:text-orange-500 rounded-lg whitespace-nowrap px-2"
                    @mouseenter="isDisplay = true"
                  >
                    管理中心
                  </button>
                  <div
                    class="flex flex-col absolute right-0 top-full w-18 bg-orange-100 rounded text-gray-600 shadow-lg r z-10"
                    v-show="isDisplay"
                    @mouseleave="isDisplay = false"
                  >
                    <a
                      href="/dashboard"
                      target="_blank"
                      class="border rounded-t border-orange-300 text-center hover:bg-orange-600 hover:text-white"
                      >已选款</a
                    >
                    <a
                      @click="logout"
                      target="_blank"
                      class="border-x border-b rounded-b border-orange-300 text-center hover:bg-orange-600 hover:text-white"
                      >退出</a
                    >
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <!-- 商家展示区 -->
    <Ad />
    <div class="container mx-auto mb-6 px-4">
      <div class="bg-white shadow-sm">
        <!-- 商品列表上方导航 -->
        <div class="flex items-center h-14 px-6">
          <div class="flex items-center space-x-8">
            <template v-for="(item, index) in navTop" :key="index">
              <button
                class="text-gray-600 hover:text-red-500 whitespace-nowrap"
                @click="handleNavTop(item)"
              >
                {{ item.menuName }}
                <span
                  class="ml-1 px-1.5 py-0.5 text-xs bg-red-500 text-white rounded !rounded-button"
                  v-if="item.isHot"
                  >HOT</span
                >
                <span
                  class="ml-1 px-1.5 py-0.5 text-xs bg-green-500 text-white rounded !rounded-button"
                  v-if="item.isNew"
                  >NEW</span
                >
              </button>
            </template>
          </div>
        </div>

        <!-- 筛选区域 -->
        <div class="flex items-center h-12 px-6">
          <div class="flex items-center space-x-6">
            <span class="text-gray-600">综合</span>

            <el-dropdown trigger="click" @command="handleHotSort">
              <button
                class="flex items-center space-x-1 text-gray-600 hover:text-gray-900 !rounded-button whitespace-nowrap"
              >
                <span>默认人气</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="newest">最新人气</el-dropdown-item>
                  <el-dropdown-item command="highest"
                    >最高人气</el-dropdown-item
                  >
                  <el-dropdown-item command="lowest">最低人气</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="handleTimeSort">
              <button
                class="flex items-center space-x-1 text-gray-600 hover:text-gray-900 !rounded-button whitespace-nowrap"
              >
                <span>默认时间</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="latest">最新发布</el-dropdown-item>
                  <el-dropdown-item command="earliest"
                    >最早发布</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="handlePriceSort">
              <button
                class="flex items-center space-x-1 text-gray-600 hover:text-gray-900 !rounded-button whitespace-nowrap"
              >
                <span>默认价格</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="des"
                    >价格从高到低</el-dropdown-item
                  >
                  <el-dropdown-item command="asc"
                    >价格从低到高</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <div class="flex items-center space-x-2">
              <el-input
                v-model="minPrice"
                placeholder="￥"
                class="w-24 text-sm"
              />
              <span class="text-gray-400">-</span>
              <el-input
                v-model="maxPrice"
                placeholder="￥"
                class="w-24 text-sm"
              />
              <el-button
                type="primary"
                class="ml-2 !rounded-button whitespace-nowrap"
                @click="handlePriceSearch"
                >确认</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="container mx-auto px-4 pb-8">
      <div class="grid grid-cols-5 gap-6">
        <div
          v-for="(product, index) in products"
          :key="index"
          class="bg-white rounded-lg shadow-sm overflow-hidden hover:border-orange-500 hover:border"
        >
          <div class="relative">
            <a :href="`/productDetails/${product.id}`" target="_blank">
              <div class="groom" v-if="product.recommend"></div>
              <img
                :src="product.image"
                :alt="product.name"
                class="w-full aspect-square object-cover"
              />
            </a>
            <!-- <span v-if="product.tag" class="absolute top-2 right-2 px-2 py-1 text-xs text-white rounded"
              :class="product.tagClass">
              {{ product.tag }}
            </span> -->
          </div>
          <div class="p-4">
            <a href="#" target="_blank">
              <h3 class="text-sm text-gray-800">{{ product.name }}</h3>
              <p class="text-gray-400 text-xs mb-2 mt-1">
                {{ product.description }}
              </p>
            </a>
            <div class="mt-2 flex items-center justify-between">
              <span class="text-orange-500 text-lg font-medium"
                >¥{{ product.price }}</span
              >
              <div class="price-tag flex items-center">
                <!-- <span class="ml-2 text-xs text-gray-400">已售{{ product.sold }}件</span> -->
                <i
                  class="w-5 h-5 float-left icon_1"
                  title="生产厂商"
                  v-if="product.price_tag.includes('厂')"
                ></i>
                <i
                  class="w-5 h-5 float-left icon_2"
                  title="支持预定产品"
                  v-if="product.price_tag.includes('订')"
                ></i>
                <i
                  class="w-5 h-5 float-left icon_3"
                  title="超级会员"
                  v-if="product.price_tag.includes('超')"
                ></i>
                <button
                  class="ml-0.5 text-sm text-gray-400 rounded border border-gray-300 px-1"
                  @click="addToFavorites(product.id)"
                >
                  收藏
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="mt-8 flex">
        <el-pagination
          hide-on-single-page
          v-model:current-page="currentPage"
          :page-size="20"
          :total="pageTotal"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next,total,jumper"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 广告区域 -->
    <Ad2 />
    <!-- 底部 -->
    <Footer2 />
  </div>
</template>

<script setup>
import Footer2 from "@/components/Footer2.vue";
import Ad from "@/components/Ad.vue";
import Ad2 from "@/components/Ad2.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
console.log(userStore.account, "account", userStore.user.phone);
const router = useRouter();
const isDisplay = ref(false);
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
//导航栏信息
const navItems = ref([]);
//搜索框下的标签
const tagGroups = ref();
//主页商品信息
const products = ref();
//商品上方条件检索
const navTop = ref([]);
//是否显示货源地
const showSource = ref(false);
//货源地
const source = ref("苏州");
const otherSource = ref(["昆山女鞋", "吴江女鞋"]);

//分页相关的数据
const currentPage = ref(1);
const pageTotal = ref(0);
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  //todo 做分页查询
};
//登录注册
const handleToLogin = () => {
  console.log("登录");
  router.push("/login");
};
const handleToRegister = () => {
  console.log("注册");
  router.push("/register/step1");
};

//todo 获取商品数据的方法
const getProductList = async () => {
  //获取主页产品数据
  await loadLocalJson("json/home/products.json").then((res) => {
    products.value = res.data.products;
    pageTotal.value = res.data.total;
  });
};

onMounted(async () => {
  //获取头部导航数据和标签数据
  await loadLocalJson("json/home/nav.json").then((res) => {
    navItems.value = res.data.navItems;
    tagGroups.value = res.data.tags;
  });
  //获取商品列表上方条件检索数据
  await loadLocalJson("json/home/navTop.json").then((res) => {
    navTop.value = res.data;
  });
  getProductList();
});

const searchKeyword = ref();
//根据关键词搜索商品
const handleSearch = () => {
  console.log("你所检索的关键词是：", searchKeyword.value);
};
// todo根据标签检索商品数据
const byTagSearch = (tag) => {
  console.log("你点击的标签是：", tag);
  //todo获取到后端根据标签检索到的商品数据 存入products
};

//todo根据商品上方的标签搜索善品
const handleNavTop = (menu) => {
  console.log("你点击的标签是：", menu);
  //todo 根据点击的标签检索产品  保存到 products
};
//todo 根据时间排序
const handleTimeSort = (command) => {
  console.log("你点击的标签是：", command);
  //todo 根据点击的标签检索产品  保存到 products
};
//todo 根据价格排序
const handlePriceSort = (command) => {
  console.log("你点击的排序是：", command);
  //todo 根据点击的排序检索产品  保存到 products
};
//todo 根据人气排序
const handleHotSort = (command) => {
  console.log("你点击的排序是：", command);
  //todo 根据人气高低排序
};

// 价格区间
const maxPrice = ref();
const minPrice = ref(0);
//todo综合搜索根据价格搜索
const handlePriceSearch = () => {
  console.log("你点击的标签是：", minPrice.value, maxPrice.value);
};
function handleMouseOver(e) {
  e.currentTarget.style.boxShadow = "0 0 0 1px #d97706"; // 黄色边框
}
function handleMouseOut(e) {
  e.currentTarget.style.boxShadow = "0 0 0 1px transparent";
}

//点击的产品是否被当前用户收藏
const addToFavorites = (id) => {
  console.log(id);
  //todo调用后端接口修改收藏状态
};

const logout = () => {
  userStore.isLogin = false;
  router.push("/homePage");
};
</script>

<style scoped>
.container {
  max-width: 1440px;
}

.nav-header {
  width: 100%;
  min-width: 1220px;
  background: url(src/assets/image/head_bg-a467f4f540.jpg) center bottom #faf0de;
  border-bottom: 1px solid #f4d3aa;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.groom,
.groom-new {
  position: absolute;
  right: -1px;
  top: -2px;
  width: 52px;
  height: 52px;
  z-index: 10;
}

.groom {
  background: url(src/assets/image/label/tj-d778886c9d.png) no-repeat;
}

.icon_1 {
  background: url(src/assets/image/label/badge-4b00826bad.png) no-repeat 0 0;
}

.icon_2 {
  background: url(src/assets/image/label/badge-4b00826bad.png) no-repeat -20px 0;
}

.icon_3 {
  background: url(src/assets/image/label/badge-4b00826bad.png) no-repeat -40px 0;
}
</style>
